<template>
	<view class="center">
		<view class="center2">
			<view class="address">
				<text >收货人</text>
				<input placeholder="收货人" v-model="addressDetailInfoByID.addressContactName"/>
			</view>
			<view class="address">
				<text>手机号码</text>
				<input maxlength="11" placeholder="手机号码" v-model="addressDetailInfoByID.addressContactTel"/>
			</view>
			<view class="address">
				<text>所在省会</text>
				<input  placeholder="所在省会" v-model="addressDetailInfoByID.addressProvince"/>
			</view>
			<view class="address">
				<text>所在城市</text>
				<input  placeholder="所在城市" v-model="addressDetailInfoByID.addressCity"/>
			</view>
			<view class="address">
				<text>所在地区</text>
				<input  placeholder="所在地区" v-model="addressDetailInfoByID.addressDistrict"/>
			</view>
			<view class="address">
				<text>所在街道</text>
				<input  placeholder="所在街道" v-model="addressDetailInfoByID.addressStreet"/>
			</view>
			<view class="address1">
				<text>详情地址</text>
				<input  placeholder="如道路、门牌、小区、楼栋号、单元室等" v-model="addressDetailInfoByID.addressDetail"/>
			</view>
			<view class="address1">
				<text>邮编</text>
				<input  placeholder="所在地区邮编" v-model="addressDetailInfoByID.addressZip"/>
			</view>
		</view>
		
		<view class="foot">
			<view class="footCenter">
				<text>
					显示智能填写、标签、默认地址功能
				</text>
				<image src="https://z3.ax1x.com/2021/04/10/cdIlNQ.png"></image>
			</view>
			<view class="save" @click="updateAddress">
				<text>保存</text>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import {createNamespacedHelpers} from "vuex"
	let {mapActions,mapState}=createNamespacedHelpers("mine")
	export default {
		data() {
			return {
			};
		},
		onLoad(option) {
			this.getAddressByIDInfo(option.addressId)
			// console.log(option)
		},
		methods:{
			...mapActions(["getAddressByIDInfo","updateAddressInfo"]),
			async updateAddress(){
				let data =await this.updateAddressInfo(this.addressDetailInfoByID)
				if(data.code==1356){
					uni.showToast({
						title:"修改地址成功",
						success() {
							uni.navigateTo({
								url:"../../mine/mineAddress/mineAddress"
							})
						}
					})
				}
				console.log(data)
			}
		},
		computed:{
			...mapState(["addressDetailInfoByID"])
		}
	}
</script>

<style lang="scss">
	.center{
		box-sizing: border-box;
		padding: 10rpx;
		height: 100%;
		width: 100vw;
		background-color: #F1F1F1;
		.center2{
			padding: 18rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			.address{
				width: 100%;
				display: flex;
				padding: 18rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #dfdfdf;
				text{
					width: 20%;
					display: block;
					margin-right: 40rpx;
					font-size: 30rpx;
				}
				input{
					// border: 1rpx solid red;
					width: 75%;
					font-size: 26rpx;
				}
			}
			.address1{
				width: 100%;
				display: flex;
				box-sizing: border-box;
				padding: 18rpx;
				border-bottom: 1rpx solid #dfdfdf;
				text{
					margin-top: 30rpx;
					width: 20%;
					display: block;
					// border: 1rpx solid red;
					margin-right: 40rpx;
					font-size: 30rpx;
				}
				input{
					vertical-align: top;
					line-height: 1;
					// border: 1rpx solid red;
					width: 75%;
					height: 100rpx;
					font-size: 26rpx;
				}
			}
		}
		
		.foot{
			height: 1000rpx;
			padding: 18rpx;
			background-color: #FFFFFF;
			.footCenter{
				margin-top: 40rpx;
				text-align: center;
				text{
					color: #ababab;
					font-size: 28rpx;
					margin-right: 10rpx;
				}
				image{
					width: 30rpx;
					height: 25rpx;
				}
			}
			.save{
				margin-top: 100rpx;
				display: flex;
				align-items: center;
				text-align: center;
				text{
					margin-right: 20rpx;
					font-size: 24rpx;
					color:#ffffff;
					border-radius: 30rpx;
					line-height: 80rpx;
					display: inline-block;
					width: 100%;
					height: 80rpx;
					background:linear-gradient(90deg,#ff7c3a 0%,#ff7d31 30%,#ff7214 51%,#ff460e 100%);
				}
			}
		}
		
	}
</style>

